<template>
	<view>
		<view class="user">
			<view class="user-content" v-if="userInfo">
				<view class="user-avatar" @tap="Gouser">
					<image :src="userInfo.avatar" mode=""></image>
				</view>
				<view class="user-name" @tap="Gouser">
					{{ userInfo.nickname }}
				</view>
			</view>
			<view class="user-content" v-else @tap="GoLogin">
				<view class="user-avatar">
					<image style="width: 120rpx;height: 120rpx;" src="../../static/nologin.png" mode=""></image>
				</view>
				<view class="user-name">
					请先登录
				</view>
			</view>
		</view>
		<view class="order">
			<view class="order-item" v-for="(item,i) in orderList" :key="i" @tap="Goorder(i)">
				<view class="order-icon">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="order-name">
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="item-list">
			<view class="item" v-for="(item,i) in itemList" :key="i" @tap="Gourl(item.url,i)">
				<view class="item-left">
					{{ item.name }}
				</view>
				<view class="item-right">
					<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				itemList: [{
						"name": "我的客服",
						"url": "/pages/my/kf"
					},
					{
						"name": "退出登录"
					},
				],
				// itemList: [{
				// 		"name": "我的收藏",
				// 		"url": "/pages/show/index"
				// 	},
				// 	{
				// 		"name": "我的地址",
				// 		"url": "/pages/address/indexList"
				// 	},
				// 	{
				// 		"name": "我的优惠券",
				// 		"url": "/pages/coupon/index"
				// 	},
				// 	{
				// 		"name": "退出登录"
				// 	},
				// ],
				orderList: [
					{
						"name": "待付款",
						"img": "../../static/order1.png"
					},
					{
						"name": "待发货",
						"img": "../../static/order2.png"
					},
					{
						"name": "已发货",
						"img": "../../static/order3.png"
					},
					{
						"name": "已完成",
						"img": "../../static/order5.png"
					},
					{
						"name": "退款",
						"img": "../../static/order4.png"
					}
				],
				List: [{
						"name": "我的地址",
						"url": "/pages/address/index"
					},
					{
						"name": "我的收藏",
						"url": "/pages/show/index"
					}
				]
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.userInfo = uni.getStorageSync('userinfo')
			}
		},
		methods: {
			Goorder(i) {
				uni.navigateTo({
					url: '/pages/order/index?index=' + i
				})
			},
			LoginOut() {
				uni.clearStorageSync()
				uni.showToast({
					title: '退出登录',
					icon: 'success'
				})
				setTimeout(res => {
					uni.navigateTo({
						url: '/pages/login/index'
					})
				}, 500)
			},
			GoLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			Gourl(url, i) {
				if (i != 1) {
					uni.navigateTo({
						url: url
					})
				} else {
					this.LoginOut()
				}

			},
			Gouser() {
				uni.navigateTo({
					url: '/pages/my/avatar'
				})
			}
		}
	}
</script>

<style>
	.user {
		width: 100%;
		height: 400rpx;
		background-color: #fc6564;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.user-content {
		margin-bottom: 100rpx;
		width: 90%;
		height: 150rpx;
		display: flex;
		align-items: center;
	}

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.user-name {
		margin-top: 40rpx;
		margin-left: 80rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.user-avatar>image {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.order {
		top: -100rpx;
		border-radius: 20rpx;
		position: relative;
		width: 94%;
		margin-left: 3%;
		height: 140rpx;
		background-color: #fff;
		display: flex;
		padding: 25rpx 0;
	}

	.order-item {
		width: 20%;
		height: 100%;
	}

	.order-icon {
		width: 100%;
		height: 65%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.order-icon>image {
		width: 55rpx;
		height: 55rpx;
	}

	.order-name {
		font-size: 26rpx;
		text-align: center;
		color: #333;
	}

	.item-list {
		position: relative;
		top: -80rpx;
		width: 94%;
		border-radius: 20rpx;
		background-color: #fff;
		margin-left: 3%;
	}

	.item {
		font-size: 28rpx;
		color: #333;
		padding: 45rpx 35rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>